<template>
  <ve-card :title="'发起反写时间：' + record.createTime">
    <ve-cell-val label="车型信息" :value="record.modelName" />
    <ve-cell-val label="价格模板" :value="record.templateName" />
    <ve-cell label="应用门店">
      <text style="margin-right: 16rpx">{{ record.siteCount }}</text>
      <ve-button size="tiny" type="primary" @click="toSiteDetail">查看</ve-button>
    </ve-cell>
    <ve-cell label="反写对象" layout="vertical">
      <view class="form-block">
        <view class="channel-item">
          <view class="channel-item-content">
            <!-- 渠道 -->
            <text class="channel-name">{{ record.sourceIdName }}：{{ record.username }}</text>
            <text :class="['res_status', 'res_status_' + record.status]">{{ record.statusName }}</text>
          </view>
          <ve-button style="margin-left: 24rpx" size="tiny" type="primary" @click="toDetail(record)">查看</ve-button>
        </view>
      </view>
    </ve-cell>
    <ve-cell-val label="完成反写时间" :value="record.finishTime" />
    <ve-cell-val label="操作人" :value="record.operatorUserName" />
    <ve-cell label="反写价格信息" layout="vertical">
      <view class="form-block">
        <template
          v-if="
            record.price ||
            record.weekendPrice ||
            record.poundageAmount ||
            record.holidayInfoJson?.length > 0 ||
            record.customInfoJson?.length > 0
          "
        >
          <view class="fee-item" v-if="record.price">平日价：{{ record.price }} 元/日</view>
          <view class="fee-item" v-if="record.weekendPrice">
            周末价：{{ record.weekendPrice }} 元/日
            <ve-tag style="margin-right: 4rpx" color="blue" :title="item" v-for="item in weekends" :key="item" />
          </view>
          <view class="fee-item" v-if="record.poundageAmount">手续费：{{ record.poundageAmount }} 元/次</view>
          <view class="fee-item holiday-wrap" v-if="record.holidayInfoJson && record.holidayInfoJson.length > 0">
            <div class="holiday-label">节假日价格-</div>
            <div v-for="(item, index) in record.holidayInfoJson" :key="index">{{ item.typeName }}： {{ item.price }} 元/日 </div>
          </view>
          <view class="fee-item" v-if="record.customInfoJson && record.customInfoJson.length > 0">
            <view>自定义价格：</view>
            <view v-for="(item, index) in record.customInfoJson" :key="index">
              <span class="daterange">{{ item.startTime }}至{{ item.endTime }} </span>
              <text class="price"> {{ item.price }} 元/日</text>
            </view>
          </view>
        </template>
        <template v-else>-</template>
      </view>
    </ve-cell>
    <ve-operate-list :operates="operates" :record="record" />

    <!-- 重新反写弹窗 -->
    <ve-modal
      title="提示"
      v-model="reSyncPriceModelValue"
      :okLoading="okLoading"
      @cancel="onReSyncPriceModelCancel"
      @confirm="onReSyncPriceModelConfirm"
    >
      <view class="modal-body">是否重新反写？</view>
    </ve-modal>
  </ve-card>
</template>

<script setup>
  import { ref } from 'vue'
  import { retryChannelSyncPrice } from '@/api/business/channelSyncPrice'

  const props = defineProps({
    record: {
      type: Object,
      default: () => ({}),
    },
  })

  const emits = defineEmits('resetRefresh')

  const weekends = props.record.weekendDayList.map((it) => {
    if (it == 5) {
      return '周五'
    } else if (it == 6) {
      return '周六'
    } else if (it == 7) {
      return '周日'
    }
    return ''
  })
  // 重新反写弹窗
  const reSyncPriceModelValue = ref(false)
  const okLoading = ref(false)
  // 重新反写弹窗关闭
  const onReSyncPriceModelCancel = () => {
    reSyncPriceModelValue.value = false
  }
  // 重新反写弹窗确认
  const onReSyncPriceModelConfirm = () => {
    okLoading.value = true
    retryChannelSyncPrice({ id: props.record.id })
      .then((res) => {
        okLoading.value = false
        reSyncPriceModelValue.value = false
        uni.showToast({
          icon: 'none',
          title: res.message,
        })
        emits('resetRefresh')
      })
      .catch((err) => {
        okLoading.value = false
        console.log('🐳 > retryChannelSyncPrice > err:', err)
      })
  }
  const operates = [
    {
      label: '重新反写',
      permission: 'svmsapp:sync-ota-price.retrySyncOTA',
      // 部分失败、失败
      show: (record) => record.status == 2 || record.status == -1,
      method: (record) => {
        reSyncPriceModelValue.value = true
      },
    },
  ]

  // 去详情
  const toDetail = (record) => {
    uni.navigateTo({
      url: '/pages/sync-ota-price/detail?id=' + record.id,
    })
  }
  // 查看门店
  const toSiteDetail = () => {
    // 存储门店信息
    uni.setStorageSync('syncOtaPriceSite', props.record.siteNameList)
    uni.navigateTo({
      url: '/pages/sync-ota-price/site-list',
    })
  }
</script>

<style lang="less" scoped>
  .res_status {
    height: 40rpx;
    line-height: 40rpx;
    height: 40rpx;
    font-weight: 500;
    font-size: 24rpx;
    border-radius: 200rpx;
    padding: 0 16rpx;
    display: inline-block;
    // 默认失败
    background: #ffece8;
    color: #f53f3f;
    &_0 {
      color: #3491fa;
      background: #e8f7ff;
    }
    &_1 {
      color: #00b42a;
      background: #e8ffea;
    }
    &_2 {
      color: #ff7d00;
      background: #fff7e8;
    }
  }

  .channel-item {
    padding: 24rpx 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    .channel-item-content {
      flex: 1;
    }
    .channel-name {
      margin-right: 16rpx;
    }
  }

  .fee-item {
    border-bottom: 1px solid #efeff0;
    box-sizing: border-box;
    padding: 24rpx 0;

    &.holiday-wrap {
      position: relative;
      padding-left: 170rpx;
    }

    .holiday-label {
      position: absolute;
      left: 0;
      top: 24rpx;
    }
    .daterange {
      display: inline-block;
      text-align: justify;
      width: 400rpx;
    }
    .price {
      color: #3072f6;
      white-space: nowrap;
    }

    &:last-child {
      border: none;
    }
  }
  .modal-body {
    padding: 0 32rpx 32rpx;
    text-align: center;
  }
</style>
